/* 
===================================================
Advanced formatting for Cordys UI
===================================================
BOP4.1 CU5 onwards ONLY
*/
/*  Description
The advanced formatting works for the control density, size, placement and grids.
The control density presets are
_____packed-pos : no inter-control space
_____compact-pos : very tight inter-control space
_____default-pos : as it is set in BOP4.1 CU5+ templates
_____wide-pos : more space than the default
The control density can also be set from the layout, 
in that case another set of classes to be set on container 	
_____lay-packed : no inter-control space
_____lay-compact : very tight inter-control space
_____lay-default : as it is set in BOP4.1 CU5+ templates
_____lay-wide : more space than the default
--------------------------------------
The control size presets are
_____mini-pos : Smaller, and less significant than default; set on control
_____normal-pos : as it is set in BOP4.1 CU5+ templates; set on control
_____mighty-pos : bigger and more prominent than the default; set on control
_____lay-mini : Smaller, and less significant than default; set on container/parent
_____lay-normal : as it is set in BOP4.1 CU5+ templates; set on container/parent
_____lay-mighty : bigger and more prominent than the default; set on container/parent
--------------------------------------
The control placement can be controlled by flanking, or by floating
The floated controls are the ones that sit across the flow to left or right using css float property
_____floater_left : Use to float an element to the left
_____floater_right : Use to float a control to the right
_____floater_clear : use to clear floats; add to the last desired element to be floated
_____floats have known issues on older browsers, use with caution
:The flanking for multiple controls is possible with a workaround(inserting a shim between groups of controls
The control placement in a given flanking set are
_____flank first : A control that is always a new line in a flow
_____flank : A control that is in a flow
_____flank last : A control that is always a the last one in a flow
_____shim : A separator, in any layout to break a group of controls (mostly in horizontal positions)
:The predefined grids for controls are
_____of# : all flanks in a # column gridl #=2-5
_____# of5 : to make a 5 column gird of controls
_____# of4 : to make a 4 column gird of controls
_____# of3 : to make a 3 column gird of controls
_____# of2 : to make a 2 column gird of controls
_____e.g, flank_first of5, flank 2of5, flank 3of5, flank 4of5, flank last of5
The grids will work in conjunction  with the density placement and size.
The flanks can have a 'spread' other than the normal grid size
_____all prefixed sp#of#
:Call to action layouts can be made to be fixed in any of screen edges.
Mostly applicable to button control(box). The options are
_____fixed-top
_____fixed-right
_____fixed-bottom
_____fixed-left
When controls need to be shifted to be closer to another control.
_____shift-up
_____shift-left
--------------------------------------
Minimalist Modifications
_____minimal: just add this as custom className to an output or groupbox
     adding on container affects all children
--------------------------------------
The button presets are
_____primary : the prominent and the emphasized action
_____default: as it is set in BOP4.1 CU5+ templates 
_____secondary : the subdued button, for all practical purposes, this could be same as default
.default is as-is inherited from button,.h_button,.v_button selector of default.css, and thus redundant to be set as extra.
.primary needs to be defined for button with more emphasis, and needs to be done case by case basis for every customization of css, or themes.
.secondary is usually the button without border,background etc and just text, and usually this is common. It is defined here.
--------------------------------------
How it works
Any of the above can be used in isolation, or combination as long as only one from a given set is used.
The flanks are overrides for h_layout; 
*/
.start{
}
/* Reference for 4.1 CU default layout
.h_layout{ border:0px; clear:both; float:none; padding:0px; width:45%; display:inline-block; left:0px; overflow:visible; position:relative; top:0px; vertical-align:top;
margin:1em 1.5em 0px 0px; }
.v_layout,.v_layout_i{ border:0px; padding:0px; width:auto; display:block; left:0px; min-height:1.5em; overflow:visible; position:relative; top:0px;
margin:1em 0px 0px; }
.v_layout_i{ clear:both; float:none;
margin:0em 0px 1em; }
*/
/* ~~~~~~~~~~~~~~~~~~~~~ Packed layout and positioning ~~~~~~~~~~~~~~~~~~~~~ */
.h_layout.packed-pos,.v_layout.packed-pos,.v_layout_i.packed-pos{
	margin:0px;
}
.lay-packed .h_layout,.lay-packed .v_layout,.lay-packed .v_layout_i{
	margin:0px;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Compact layout and positioning ~~~~~~~~~~~~~~~~~~~~~ */
/* positions */
.h_layout.compact-pos{
	margin:.5em 1em 0px 0px;
}
.v_layout.compact-pos{
	margin:.5em 0px 0px;
}
.v_layout_i.compact-pos{
	margin:0em 0px .5em;
}
/* layout */
.lay-compact .h_layout{
	margin:.5em 1em 0px 0px;
}
.lay-compact .v_layout{
	margin:.5em 0px 0px;
}
.lay-compact .v_layout_i{
	margin:0em 0px .5em;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Default layout and positioning ~~~~~~~~~~~~~~~~~~~~~ */
/* positions */
.h_layout.default-pos{
	margin:1em 1.5em 0px 0px;
}
.v_layout.default-pos{
	margin:1em 0px 0px;
}
.v_layout_i.default-pos{
	margin:0em 0px 1em;
}
/* layouts */
.lay-default .h_layout{
	margin:1em 1.5em 0px 0px;
}
.lay-default .v_layout{
	margin:1em 0px 0px;
}
.lay-default .v_layout_i{
	margin:0em 0px 1em;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Wide layout and positioning ~~~~~~~~~~~~~~~~~~~~~ */
/* positions */
.h_layout.wide-pos{
	margin:1.5em 2em 0px 0px;
}
.v_layout.wide-pos{
	margin:1.5em 0px 0px;
}
.v_layout_i.wide-pos{
	margin:0em 0px 1.5em;
}
/* layouts */
.lay-wide .h_layout{
	margin:1.5em 2em 0px 0px;
}
.lay-wide .v_layout{
	margin:1.5em 0px 0px;
}
.lay-wide .v_layout_i{
	margin:0em 0px 1.5em;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Control Sizes ~~~~~~~~~~~~~~~~~~~~~ */
.mini-pos{
	font-size:.5em;
}
.normal-pos{
	font-size:1em;
}
.mighty-pos{
	font-size:1.3em;
}
.lay-mini .h_layout,.lay-mini .v_layout,.lay-mini .v_layout_i{
	font-size:.5em;
}
.lay-normal .h_layout,.lay-normal .v_layout,.lay-normal .v_layout_i{
	font-size:1em;
}
.lay-mighty .h_layout,.lay-mighty .v_layout,.lay-mighty .v_layout_i{
	font-size:1.3em;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Controls' Floating~~~~~~~~~~~~~~~~~~~~~ */
.floater_left,.floater-left{
	float:left;
}
.floater_right,.floater-right{
	float:right;
}
.floater_clear:after,.floater-clear:after{
	clear:both;
	display:block;
	content:".";
	line-height:0;
	visibility:hidden;
	height:0;
}
.floater_clear.v_layout,.floater-clear.v_layout{
	display:block;
}
.floater_clear.h_layout,.floater-clear.h_layout{
	display:inline-block;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Controls' Flanking ~~~~~~~~~~~~~~~~~~~~~ */
/* done for RTL by default */
.flank.first{
}
.flank.first:before{
}
.flank{
	display:inline-block;
}
.flank{
	*display:inline;
}
.flank.last{
	margin-right:0px;
}
.flank.last:after{
}
/* flanking possible ONLY via custom control with class */
/* insert a Shim - a breaker control */
.h_layout.shim,.v_layout.shim,.v_layout_i.shim{
	margin:0px;
	padding:0px;
	width:0px!important;
	display:block;
	font-size:0px;
	line-height:0px;
	height:0px!important;
}
.shim hr,.separator hr.shim{
	border:0px none;
}
/* to make the shim selectable in designer */
div#content.maincontainer .h_layout.shim,div#content.maincontainer .v_layout.shim,div#content.maincontainer .v_layout_i.shim{
	width:10px!important;
	height:10px!important;
	margin:1em!important;
}
/* ~~~~~~~~~~~~~~~~~~~~~ 2 col Grid ~~~~~~~~~~~~~~~~~~~~~ */
.flank.of2{
	margin-right:2%;
	width:49%!important;
	*margin-right:1%;
}
.flank.first.of2{
	margin-right:2%;
}
.flank.last.of2{
	margin-right:0px;
}
/* ~~~~~~~~~~~~~~~~~~~~~ 3 col Grid ~~~~~~~~~~~~~~~~~~~~~ */
.flank.of3{
	margin-right:2%;
	width:32%!important;
	*margin-right:1.2%;
}
.flank.first.of3{
	margin-right:2%;
	*margin-right:1.2%;
}
.flank.last.of3{
	margin-right:0px;
}
.flank.sp2of3{
	margin-right:2%;
	width:66%!important;
	*margin-right:1.2%;
}
/* ~~~~~~~~~~~~~~~~~~~~~ 4 col Grid ~~~~~~~~~~~~~~~~~~~~~ */
.flank.of4{
	margin-right:1.3%;
	width:24%!important;
	*margin-right:1.2%;
}
.flank.first.of4{
	margin-right:1.3%;
	*margin-right:1.2%;
}
.flank.last.of4{
	margin-right:0px;
}
.flank.sp2of4{
	margin-right:1.3%;
	width:49.3%!important;
	*margin-right:1.2%;
}
.flank.sp3of4{
	margin-right:1.3%;
	width:74.6%!important;
	*margin-right:1.2%;
}
/* ~~~~~~~~~~~~~~~~~~~~~ 5 col Grid ~~~~~~~~~~~~~~~~~~~~~ */
.flank.of5{
	margin-right:1.2%;
	width:19%!important;
}
.flank.first.of5{
	margin-right:1.2%;
}
.flank.last.of5{
	margin-right:0px;
}
.flank.sp2of5{
	margin-right:1.2%;
	width:39.4%!important;
}
.flank.sp3of5{
	margin-right:1.2%;
	width:59.4%!important;
}
.flank.sp4of5{
	margin-right:1%;
	width:80%!important;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Fixed Controls ~~~~~~~~~~~~~~~~~~~~~ */
.fixed-top,.fixed-right,.fixed-bottom,.fixed-left{
	display:block;
	position:fixed!important;
}
.fixed-top{
	top:0px;
	bottom:auto;
}
.fixed-right{
	right:0px;
	left:auto;
}
.fixed-bottom{
	bottom:0px;
	top:auto;
}
.fixed-left{
	left:0px;
	right:auto;
}
/* ~~~~~~~~~~~~~~~~~~~~~ Shifters ~~~~~~~~~~~~~~~~~~~~~ */
/* default position shifter */
.shift-up,.shift-up.default-pos{
	margin-top:-1em;
}
.shift-left.v_layout,.shift-left.v_layout.default-pos{
	margin-left:-1em;
}
.shift-left.v_layout_i,.shift-left.v_layout_i.default-pos{
	margin-left:-1em;
}
.shift-left.h_layout,.shift-left.h_layout.default-pos{
	margin-left:-1.5em;
}
/* compact position shifter */
.shift-up.compact-pos{
	margin-top:-.5em;
}
.shift-left.v_layout.compact-pos{
	margin-left:-.5em;
}
.shift-left.v_layout_i.compact-pos{
	margin-left:-.5em;
}
.shift-left.h_layout.compact-pos{
	margin-left:-1em;
}
/* wide position shifter */
.shift-up.wide-pos{
	margin-top:-1.5em;
}
.shift-left.v_layout.wide-pos{
	margin-left:-2em;
}
.shift-left.v_layout_i.wide-pos{
	margin-left:-2em;
}
.shift-left.h_layout.wide-pos{
	margin-left:-2em;
}
/* possible left shifters for v layout are not necessary */
/* ~~~~~~~~~~~~~~~~~~~~~ Shifters end ~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~ Minimalist Modifications ~~~~~~~~~~~~~~~~~~~~~ */
.minimal input.output,.minimal input.output,.minimal *[class~=output]{
	border:0px none transparent!important;
	font-weight:bold;
}
.minimal .v_label+.fieldsbox>input.output,.minimal .v_label+.fieldsbox>input.output,.minimal .v_label+.fieldsbox>*[class~=output]{
	padding:0px;
}
.minimal .groupheader{
	border-width:0px;
	background-color:transparent;
	filter:none;
}
.minimal .groupheader label,.minimal .groupheader label.primarycaption{
	margin:0px;
	padding-left:20px;
}
.minimal .groupcontent{
	border-width:2px 1px 1px;
}
.minimal .groupbox .expand{
	background-image:url('/cordys/wcp/theme/default/icon/interface/plus.png');
	background-position:2px 50%;
}
.minimal .groupbox .collapse{
	background-image:url('/cordys/wcp/theme/default/icon/interface/minus.png');
	background-position:2px 50%;
}
.minimal .simplecontainer iframe{
	border:0px none transparent;
}
/* ~~~~~~~~~~~~~~~~~~~~~ secondary buttons ~~~~~~~~~~~~~~~~~~~~~ */
button.secondary{
	border:0px none transparent!important;
	background:none transparent!important;
	box-shadow:none!important;
	text-decoration:underline;
}
@import url(corrector.1.css);